<template>
    <div class="detail-container">
      <div :class="isIos?'center_top_ios':'center_top'">
        <div class="center_top_title">
          <div class="center_title_left">
            <a href="javascript:;" @click="$router.go(-1)" class="go-back">
              <i></i>
            </a>
            员工详情
          <span v-if="tabIndex == 0" class="center_title_right" @click="isSubmit">
            <img class="center_make_img" src="../../assets/img/center/cener_make.png" alt="">
          </span>
          </div>
        </div>
        <div class="_center_middle_info">
            <div class="user_name">{{oInfo.realName}}</div>
            <div class="user_position">
              <rater class="k-star":margin="1" :value="Number(oInfo.allScoreAvg)" :font-size="15" disabled></rater>
            </div>
        </div>
      </div>
      <div class="k-tabcard">
          <tab :line-width='2' custom-bar-width="7.5rem">
            <tab-item selected @on-item-click="checkTab">员工信息</tab-item>
            <tab-item @on-item-click="checkTab">员工评价({{index}})</tab-item>
            <tab-item @on-item-click="checkTab">背调报告</tab-item>
          </tab>
      </div>
      <div class="datail-content">
        <!--tab1员工信息-->
        <div v-if="tabIndex == 0" class="">
          <section class="m-inner">
            <div class="form-group">
              <span class="form-label">联系方式</span>
              <div class="form-input">
                <input type="text"  class="m-text" placeholder="联系方式" v-model="oInfo.mobile" :readonly="isReadonly"/>
              </div>
            </div>
          </section>
          <section class="m-inner">
            <div class="form-group">
              <span class="form-label">身份证</span>
              <div class="form-input">
                <input type="text" class="m-text" placeholder="请输入身份证" v-model="oInfo.idCard" readonly/>
              </div>
            </div>
          </section>
          <section class="m-inner">
            <div class="form-group">
              <span class="form-label">部门-职位</span>
              <div class="form-input">
                <input type="text" class="m-text" placeholder="请输入职位" v-model="oInfo.position" readonly/>
              </div>
            </div>
          </section>
          <section class="m-inner">
            <div class="form-group">
              <span class="form-label">在职时间</span>
              <div class="form-input">
                <input type="text" class="m-text" placeholder="请输入姓名" v-model="sb_time" readonly/>
              </div>
            </div>
          </section>
          <section class="m-inner">
            <div class="form-group">
              <span class="form-label">在职状态</span>
              <div class="form-input">
                <input type="text" class="m-text" placeholder="请输入姓名" v-model="oInfo.workStatusDesc" readonly/>
              </div>
            </div>
          </section>
          <div class="submitBtn" v-if="isBtn" @click="updateBtn">
            <div>保存</div>
          </div>
        </div>
        <div class="tab-two" v-if="tabIndex == 1">
          <div class="secret-scroller">
            <div v-if="ifMassage" class="noMassage">
              <img src="../../assets/img/no-massage.png" alt="">
              <p>没有评价数据哟</p>
            </div>
            <scroller v-if="!ifMassage">
              <comment :commentlist="replyItem" v-for="replyItem in handleData" :key="replyItem.secretFilesInfoId" @showReplyInput="_showReplyInput" @showReplyInput_2="_showReplyInput_2"></comment>
              <!--占位符-->
              <div class="scroller-place"></div>
            </scroller>
          </div>


          <div class="k-footer" @click="openAssess">
            添加工作表现表现评价
          </div>
          <div class="searchIpt-container" v-if="replyCase">
            <div class="searchIpt" >
              <div class="clearFix">
                <input type="text" v-focus class="keyWord" :placeholder="_placeholder" v-model="replyContent" value="" />
                <input type="button" value="回复" @click="submitReply">
                <span></span>
              </div>
            </div>
          </div>

          <div class="bj" @click="hideModel" v-if="replyCase"></div>
        </div>
        <div v-if="tabIndex == 2">
          <!--<div v-if="ifReport" class="noMassage">-->
            <!--<img src="../../assets/img/no-massage.png" alt="">-->
            <!--<div class="submitBtn">-->
              <!--<div @click="goBd">还没有背调报告，请去背调</div>-->
            <!--</div>-->
          <!--</div>-->
          <div v-if="ifReport" class="noMassage">
            <img src="../../assets/img/no-massage.png" alt="">
            <p>没有背调报告数据哟</p>
            <div class="k-footer" @click="goBd">
              还没有背调报告，请去背调
            </div>
          </div>
          <Reference :class="isIos?'report-ios':'report'" :datadetails="datadetails" v-if="!ifReport"></Reference>
        </div>
      </div>
    </div>
</template>

<script>
  import { Rater, Tab, TabItem} from 'vux'
  import Comment from './comment.vue'
  import Reference from '../reference/reference'
  import util from '../../libs/util'
    export default {
      name: 'secret-detail',
      data () {
            return {
              index:0,
              tabIndex:'0',
              replyCase:false,
              _placeholder:'',
              replyContent:'',
              oInfo:'',
              sb_time:'',
              isBtn:false,
              handleData:[{
                secretFilesInfoId:'',
                fullName:'',
                position:'',
                entryTime:'',
                resignedTime:'',
                currentCompany:[]
              }],
              secretFilesInfoId:'',
              realName:'',
              parentComentId:'',
              rootCommentId:'',
              _secretFilesInfoId:'',
              isReadonly:true,
              ifMassage:false,
              datadetails:{},
              ifReport:false,
              memberSourceType:'',
              isIos:false

            }
        },
      directives: {
          focus: {
            inserted: function (el) {
                el.focus();
            }
          }
        },
      components:{
        Rater,
        Tab,
        TabItem,
        Comment,
        Reference
      },
//      watch: {
//        '$route' (to, from) {
//          console.info(to, from)
//          if(to.path == '/secretDetail'){
//            this.handleData = [{
//              secretFilesInfoId:'',
//              fullName:'',
//              position:'',
//              entryTime:'',
//              resignedTime:'',
//              currentCompany:[]
//            }]
//            this.updata();
//          }
//        }
//      },
      created(){
        if (window.navigator.userAgent.indexOf('LBLSIOS') > -1){
          this.isIos = true
        }else {
          this.isIos = false
        }
        console.log(this.$route.query)
        this.updata();
      },
      methods:{
        updata(){
          var url ='/lblsapp-h5/v2/secretfiles/view.json';
          var data = this.$route.query.workId;
          var that = this;
          util.ajax.post(url, {id:data}).then(function(data){
            var _data = data.data.res.data;
            console.log(_data)
            that.memberSourceType = _data.memberSourceType;
            that.oInfo = _data;
            that.index = _data.allCommentNum;
            if(_data.resignedTime == ''){
              that.sb_time = _data.entryTime+'--至今'
            }else {
              that.sb_time = _data.entryTime+'-'+_data.resignedTime
            }
            if(_data.currentCompany.length == 0 && _data.otherCompany.length == 0){
                     that.ifMassage = true;
            }else {
              //处理评论回复数据
              that.handleData[0].secretFilesInfoId = _data.id;
              that.handleData[0].fullName = _data.fullName;
              that.handleData[0].position = _data.position;
              that.handleData[0].entryTime = _data.entryTime;
              that.handleData[0].resignedTime = _data.resignedTime;
              that.handleData[0].commentList = _data.currentCompany;
              that.handleData = that.handleData.concat(_data.otherCompany);
              console.info(that.handleData)

            }
            //传递给评价页数据
            that.realName = _data.realName;
            that.secretFilesInfoId = _data.id;
            //背调数据处理
              if(_data.reqReportId){
                that.reqReportId = _data.reqReportId;
                that.getReport();
              }else {
               that.ifReport = true;
              }

          }).catch(function(error){
            console.log(error)
          })

        },
        getReport(){
          var that = this;
          var url = '/lblsapp-h5/v2/report/queryResCreditReportByReqReportId.json';
          let data = {reqReportId:this.reqReportId};
          util.ajax.post(url, data).then(function(data){
            if(data.data.code==='11'){
              that.$router.push({ path: '/'})
            }else if(data.data.code==='0'){
              that.datadetails = data.data.res.data;
              that.ifReport = false;
            }else {
              that.ifReport = true;
            }
          }).catch(function(error){
            console.log(error,2)
          })
        },
        updateBtn(){
          this.isBtn = false;
          this.isReadonly = true;
          console.info(this.oInfo.mobile)
          var url = '/lblsapp-h5/v2/secretfiles/modify.json';
          var data = {id:this.secretFilesInfoId,mobile:this.oInfo.mobile};
          var that = this;
          util.ajax.post(url, data).then(function(data){
            if(data.data.code == 0){
              that.$vux.confirm.show({
                title: '',
                content: '修改成功'
              })
            }
          }).catch(function(error){
            console.log(error)
          })
        },
        isSubmit(){
          this.isBtn = true;
          this.isReadonly = false;
        },
        checkTab(index){
          if(index == 2){
            if (this.memberSourceType = 'NEWH5'){
              this.tabIndex = index;
            }else {

            }

          }else {
            this.tabIndex = index;
          }

        },
        openAssess(){
          //添加工作评价
          console.info(this.secretFilesInfoId)
          this.$router.push({path:'addassess',query:{secretFilesInfoId:this.secretFilesInfoId,realName:this.realName}})
        },
        _showReplyInput(val,val2,val3){
          this.replyContent = '';
          //点击单条回复下
          console.info(val,val2,val3)
          this.replyCase = true;
          this._placeholder = "回复:"+val.replyPerson;
          //设置回复参数
          this.parentComentId = val.id;
          this.rootCommentId = val2.id;
          this._secretFilesInfoId = val3.secretFilesInfoId;

        },
        _showReplyInput_2(val,val2){
          this.replyContent = '';
          //点击单条回复上
          console.info(val,val2)
          this.replyCase = true;
          //设置回复参数
          this._placeholder = "回复:"+val.realName;
          this.parentComentId = val.id;
          this.rootCommentId = val.id;
          this._secretFilesInfoId = val2.secretFilesInfoId;
        },
        submitReply(){
          //提交回复
          console.info(this.replyContent);
          console.info(this._secretFilesInfoId);
          console.info(this.parentComentId);
          console.info(this.rootCommentId);
          if (this.replyContent == ''){
            //提示
            var that = this;
            this.$vux.confirm.show({
              title: '',
              content: '请添加回复内容'
            })
          }else {
            this._submitContent()
          }
        },
        hideModel(){
          //点击空白自动取消所有回复
          this.replyCase = false;
        },
        _submitContent(){
          var url = '/lblsapp-h5/v2/secretfiles/commentReply.json';
          var data = {content:this.replyContent,secretFilesInfoId:this._secretFilesInfoId,parentComentId:this.parentComentId,rootCommentId:this.rootCommentId};
          var that = this;
          util.ajax.post(url, data).then(function(data){
            console.log(data)
            if(data.data.code == 0){
              that.$vux.confirm.show({
                title: '',
                content: '回复成功',
                onShow () {
                  console.log('confirm出现')
                },
                onHide () {
                  console.log('confirm隐藏')
                },
                onCancel () {
                  that.handleData = [{
                    secretFilesInfoId:'',
                    fullName:'',
                    position:'',
                    entryTime:'',
                    resignedTime:'',
                    currentCompany:[]
                  }]
                  that.updata();
                  that.replyCase = false;
                },
                onConfirm () {
                  that.handleData = [{
                    secretFilesInfoId:'',
                    fullName:'',
                    position:'',
                    entryTime:'',
                    resignedTime:'',
                    currentCompany:[]
                  }]
                  that.updata();
                  that.replyCase = false;
                }
              })

            }
          }).catch(function(error){
            console.log(error)
          })
        },
        goBd(){
//          console.log(this.oInfo.realName,this.oInfo.idCard,this.oInfo.mobile)
          this.$router.push( {path: 'startcheck', query: {name:this.oInfo.realName,idCard:this.oInfo.idCard,mobile:this.oInfo.mobile,sourceType:'SECRETFILES',secretId:this.$route.query.workId}})
        }

      }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .detail-container{
    width:100%;
    height:100%;
    overflow: hidden;
  }
  .detail-container .center_top{
    background: url('../../assets/img/secret/Mask.png') no-repeat;
    width: 100%;
    height: 130px;
    background-size: cover;
  }
  .detail-container .center_top_ios{
    background: url('../../assets/img/secret/Mask.png') no-repeat;
    width: 100%;
    height: 150px;
    background-size: cover;
    padding-top: 20px;
  }
  .center_title_left{
    font-size: 1.8rem;
    color: #fff;
    text-align: center;
    height: 46px;
    line-height: 46px;
  }
  .center_title_left .go-back{
    position: absolute;
    width: 14.06%;
    height: 45px;
    font-size: 14px;
    color: #212121;
    left:0;
  }
  .center_title_left .go-back i {
    display: block;
    width: 16px;
    height: 16px;
    margin-top: 15px;
    margin-left: 15px;
    background-image: url(../../assets/img/reference/jiantoul.png);
    background-repeat: no-repeat;
    -webkit-background-size: contain;
    background-size: contain;
  }
  .center_title_right{
    position: absolute;
    right: 6%;
  }
  .center_title_right .center_make_img{
    width: 15px;
    height: 15px;
  }
  .center_state_img{
    width: 50px;
    height: 15px;
  }
  .user_name{
    margin-top: 10px;
    font-size: 2rem;
    color: white;
  }
  ._center_middle_info{
    text-align: center;
  }
  .user_position{
    font-size: 1.2rem;
    color: #808080;
  }

  .k-tabcard{
    margin-top: 15px;
  }
  .datail-content{
    width:100%;
    height:100%;
    background: white;
  }
  .m-inner{
    padding-left: 4.5%;
    padding-right: 4.5%;
    background: #FFFFFF;
    border-bottom: 1px solid #eee;
  }
  .m-inner .form-group{
    height: 44px;
    position: relative;
    line-height: 44px;
  }
  .m-inner .form-group .form-label{
    font-size: 1.4rem;
    color: #212121;
    position: absolute;
    left: 0;
  }
  .m-inner .form-group .form-input{
    width: 100%;
    font-size: 0;
    line-height: 44px;
    position: absolute;
    right: 0;
  }
  .m-inner .form-group .form-input .m-text {
    width: 100%;
    height: 44px;
    line-height: 20px;
    outline: none;
    border: none;
    -web-kit-appearance:none;
    -moz-appearance: none;
    background: 0 0;
    text-align: right;
  }
  /*添加评价*/
  .tab-two{
    width: 100%;
    height:100%;
  }
  .secret-scroller{
    background: white;
    position: relative;
    width:100%;
    height: 100%;
  }
  .company-top{
    padding: 1.5rem;
    border-bottom: 1px solid #F2F2F2;
  }
  .company-title{
    font-size: 1.4rem;
    color: #212121;
    letter-spacing: 0;
    line-height: 14px;
  }
  .company-time{
    font-size: 1.2rem;
    color: #808080;
    letter-spacing: 0;
    line-height: 1.2rem;
    margin-top: 0.8rem;
  }
  .company-content{
    padding: 1.5rem;
  }
  .content-img{
    float: left;
    width:4.4rem;
    height:4.4rem;
    border-radius: 50%;
  }
  .content-right{
    margin-left: 20%;
    width:80%;
  }
  .boss-name{
    font-size: 1.8rem;
    color: #212121;
    line-height: 1.2rem;
  }
  .boss{
    font-size: 1.4rem;
    color: #808080;
    letter-spacing: 0;
    line-height: 1.2rem;
    margin-left: 0.6rem;
  }
  .boss-reply{
    position: absolute;
    right:0;
    top:-0.1rem;
    font-size: 1.4rem;
    color: #F89721;
    letter-spacing: 0;
  }
  .boss-time{
    font-size: 1.2rem;
    color: #808080;
    letter-spacing: 0;
    line-height: 2rem;
  }
  .right-content{
    font-size: 1.4rem;
    color: #212121;
    letter-spacing: 0;
    line-height: 2.2rem;
    text-align: justify;
  }
  .reply-txt{
    background: #F5F5F5;
    border: 1px solid #EEEEEE;
    border-radius: 3px;
    padding: 1rem;
  }
  .men-reply{
    position: absolute;
    right:0;
    font-size: 1.2rem;
    color: #A0A0A0;
    letter-spacing: 0;
    line-height: 1.4rem;
  }
  .reply-color{
    font-size: 1.4rem;
    color: #429EDF;
  }

  .k-footer{
    width:100%;
    height:49px;
    position: absolute;
    bottom: 0;
    background: #F89721;
    font-size: 1.6rem;
    color: #FFFFFF;
    text-align: center;
    line-height: 48px;
  }
  .company-footer{
    height:3.8rem;
    border-top: 1px solid #F2F2F2;
    border-bottom: 1px solid #F2F2F2;
    text-align: center;
    line-height: 3.7rem;
    color: #F89721;
  }
  .scroller-place{
    width:100%;
    height:240px;
  }
  /*回复框*/
  .searchIpt-container{
    width:100%;
    background: white;
    position: absolute;
    bottom: 0;
    z-index: 999;
  }
  .clearFix:after{
    display: block;
    content:'';
    clear:both;
  }
  .searchIpt{

    width: 95%;
    border:1px solid #F89721;
    padding:2%;
    border-radius:24px;
    background: white;

  }
  .searchIpt input{
    line-height: 34px;
    border-radius:18px;
  }
  .searchIpt input:nth-of-type(1){
    float: left;
    width: 64%;
    padding-left: 40px;
    border:1px solid #c9c9d5;

  }
  .searchIpt input:nth-of-type(2){
    float: right;
    width:20%;
    height: 36px;
    border:1px solid #F89721;
    background: #F89721;
    color: white;
  }
  .searchIpt span{
    position: absolute;
    top:13px;
    left: 15px;
    width: 23px;
    height: 23px;
    background: url(../../assets/img/secret/select_search.png) no-repeat;
  }
  .searchIpt input:nth-of-type(1):focus{
    border-radius:18px;
    background: #fff;
    border-color:#F89721!important;
    outline:0;
  }
  .bj{
    position: absolute;
    width:100%;
    height:100%;
    top:0;
    z-index: 900;
  }
  /*<div class="submitBtn" style="margin-top: 20px;width: 100%">*/
  /*<div style="">保存</div>*/
  .submitBtn{
    margin-top: 20px;
    width: 100%
  }
  .submitBtn div{
    height:30px;
    width: 80%;
    margin: auto;
    text-align: center;
    line-height: 30px;
    color: white;
    background: #f89721;
    border-radius: 8px;
  }
  /*无数据样式*/
  .noMassage{
    height: 100%;
  }
  .noMassage img{
    display: block;
    width:4.5rem;
    height:14rem;
    padding-top: 20%;
    margin: auto;
  }
  .noMassage p{
    font-size: 14px;
    color: #808080;
    letter-spacing: 0;
    text-align: center;
    padding-top: 8%;
  }
  .report{
   margin-top: 135px
  }
  .report-ios{
    margin-top: 155px
  }
</style>
